<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>搜班APP</title>
		<script src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js"></script>
		<script type="text/javascript" src="../../../js/update.js"></script>
		<script type="text/javascript" src="../../../js/index.js"></script>
		<script type="text/javascript" src="../../../js/jquery-1.9.1.min.js"></script>
		
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.mui-bar-nav~.mui-content {
				padding: 0;
			}
			.mui-title input {
				width: 75%;
				height: 28px;
                border-radius: 5px;
                background: #CAFFE0;
                border: 1px solid #DDDDDD;
                font-size: 14px;
                color: #aaa;
                padding-left: 10px;
                padding-right:20px; 
                margin-left: 40px;
                background:url("images/fdj.png") no-repeat scroll right center transparent; 
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding: 10px 0;
                border-bottom: 1px solid #ddd;
			}
			.list_more {
				padding: 10px;
				padding-bottom: 60px;
			}
			.list_more p {
				text-align: center;
                padding: 0px 0 0 10px;
                margin: 0;
                background: white;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                color: #83E5AB;
			}
			.course_title {
				background: #000;
                filter: alpha(opacity=70);
                -moz-opacity: 0.7;
                -khtml-opacity: 0.7;
                opacity: 0.7;
                margin-top: -60px;
                padding: 10px;
			}
			.course_title p {
				color: #fff;
			}
			.mui-bar-tab .mui-tab-item {
                color: #000;
                font-weight: 600;
            }
			.mui-bar-tab .mui-tab-item span {
                padding: 0 10px;
            }
            .detail_menu {
            	padding: 10px 10px 0;
            }
            #middlePopover ul li:hover {
            	background: #ddd;
            }
            #courseDetails img {
            	width:100%;
            }
		
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var type = self.type;//课程id
				var title = self.title;
				// 隐藏滚动条
				plus.webview.currentWebview().setStyle({
					scrollIndicator: 'none'
				});
				//图片轮播，获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
				document.getElementById('comment_more').addEventListener('tap', function() {
					mui.openWindow({
						url: '../commentMore.html',
						id: 'commentMore',
                    	extras:{
                        	type:type
                        }
					});
				});
				document.getElementById('application').addEventListener('tap', function() {
					//先判断是否已经登录，已登录的状态下直接跳转；未登录时先跳转登录页login.html。
					//          	if () {
					//          		mui.openWindow({
					//                      url: '../../../login.html', 
					//                      id:'login'
					//                  });
					//          	} else{
					mui.openWindow({
						url: '../application.html',
						id: 'application',
                        extras:{
                        	type:type,title:title
                        }
					});
					//          	}  
				});
				var courseImage = "";
				mui.ajax({ //ajax请求
					url: getServerIp + 'AppCourse/courseDitail',
					type: 'GET',
					data: {
						id: type
					}, //传参
					success: function(data, textStatus, jqXHR) {
						var ClassById = data.course; //课程对象
						var secondaryClass = data.twoCourseList; //列表二级课程
						var PicList = data.courseImageList; //列表课程图片
						var CommentList = data.courseCommentList; //列表评论
						var ClassSchool = data.centerList; //对象机构,学校
//						alert(secondaryClass.length);
						//动态图片
						document.getElementById("courseImageList").innerHTML = "";
						if(PicList == null){
						}else{
						var cou = PicList.length;
						if(cou > 4){
							cou = 4;
						}
						for(var j = 0;j<cou;j++){
						   var obj = PicList[j];
							if(j == cou-1){
						   		courseImage += '<div class="mui-slider-item mui-slider-item-duplicate">'+
									'<a href="#">'+
										'<img style="width:100%;height:200px;" src="'+getServerIp+'/Public/Uploads/image/'+obj.image+'" />'+
									'</a>'+
								'</div>';
						   }
					   }
						for(var j = 0;j<cou;j++){
						   var obj = PicList[j];
						   courseImage +='<div class="mui-slider-item">'+
								'<a href="#">'+
									'<img style="width:100%;height:200px;" src="'+getServerIp+'/Public/Uploads/image/'+obj.image+'" />'+
								'</a>'+
							'</div>';
						}
						for(var j = 0;j<cou;j++){
							var obj = PicList[j];
						   if(j == 0){
						   		courseImage += '<div class="mui-slider-item mui-slider-item-duplicate">'+
									'<a href="#">'+
										'<img style="width:100%;height:200px;" src="'+getServerIp+'/Public/Uploads/image/'+obj.image+'" />'+
									'</a>'+
								'</div>';
						   }
							
						}
						}
						document.getElementById("courseImageList").innerHTML = courseImage;
						//课程对象信息 的div拼接
						document.getElementById("thisClassName").innerHTML = "";
						var ClassNameHtml = "";
						ClassNameHtml = ClassNameHtml + "<p style=\"color: #000;font-size:5vw;margin: 0;\">" + ClassById.course_name + "<\/p>";
						ClassNameHtml = ClassNameHtml + "			<p style=\"color: #000;margin-top: 10px;\">";
						ClassNameHtml = ClassNameHtml + "				<span>价格：" + ClassById.price + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span>";
						ClassNameHtml = ClassNameHtml + "				<span style=\"color: #EC971F;font-size: 6vw;\">搜班价：" + ClassById.sbprice + "<\/span>";
						ClassNameHtml = ClassNameHtml + "			<\/p>";
						document.getElementById("thisClassName").innerHTML = ClassNameHtml;
						
						//学校信息 的div拼接
						document.getElementById("thisSchoolInfo").innerHTML = "";
						var SchoolInfo = "";
						SchoolInfo = SchoolInfo + "<p style=\"color: #000;font-size:5vw;margin: 0;float: left;\">" + ClassSchool.name + "<\/p>";
						var authen = ClassSchool.authentication;
						if (!authen == "未认证") {
							SchoolInfo = SchoolInfo + "			<span><img style=\"height: 20px;\" src=\"..\/..\/..\/images\/atta.png\" \/><\/span>";
						} else {
							SchoolInfo = SchoolInfo + "<span><\/span></br>";
						}
						SchoolInfo = SchoolInfo + "			<p style=\"color: #000;margin-top: 10px;\">地址：" + ClassSchool.address + "<\/p>";
						SchoolInfo = SchoolInfo + "			<p style=\"color: #000;\">电话：" + ClassSchool.phone + "<\/p>";
						SchoolInfo = SchoolInfo + "			<p style=\"color: #000;\">学校简介：<\/p>";
						SchoolInfo = SchoolInfo + "			<p style=\"color: #000;\">";
						if(ClassSchool.editor==null || ClassSchool.editor==""){
							SchoolInfo = SchoolInfo +'暂无简介';
						}else{
							SchoolInfo = SchoolInfo + ClassSchool.editor;
						}
						SchoolInfo = SchoolInfo +"<\/p>";
						document.getElementById("thisSchoolInfo").innerHTML = SchoolInfo;
						
						//用户点评 div 拼接
						document.getElementById("CommentDetail").innerHTML = "";
						
						var lastcontent = "";
						if (CommentList != null && CommentList != "") {
						  for (i = 0; i < 1; i++) {
							var EvaluationContent = "";
							EvaluationContent = EvaluationContent + "<div id=\"EvaluationPerson\" style=\"height: 40px;\">";
							EvaluationContent = EvaluationContent + "								<p class=\'mui-ellipsis\' style=\"float: left;\">" + CommentList[i]["username"] + "<\/p>";
							EvaluationContent = EvaluationContent + "								<p style=\"float: right;\">" + CommentList[i]["create_time"] + "<\/p>";
							EvaluationContent = EvaluationContent + "							<\/div>";
							EvaluationContent = EvaluationContent + "							<div id=\"EvaluationContent\">";
							EvaluationContent = EvaluationContent + "								<p style=\"color: #000;\">" + CommentList[i]["message"] + "<\/p>";
							EvaluationContent = EvaluationContent + "							<\/div>";
							lastcontent = lastcontent + EvaluationContent;
						  }
						} else{
							var EvaluationContent = "";
							EvaluationContent = EvaluationContent + "<div id=\"EvaluationPerson\" style=\"height: 40px;\">";
							EvaluationContent = EvaluationContent + "								<p class=\'mui-ellipsis\' style=\"float: left;\">" + "该课程暂无评论" + "<\/p>";
							EvaluationContent = EvaluationContent + "							<\/div>";
							lastcontent = lastcontent + EvaluationContent;
						}
						
						document.getElementById("CommentDetail").innerHTML = lastcontent;
						
						//课程详情 div拼接
						//document.getElementById("courseDetails").innerHTML = "";
						document.getElementById("courseDetails").innerHTML = ClassById.editor;
						
					}
				});
			});
		</script>

	</head>
	<body> 
		<div class="mui-slider">
			<div class="mui-slider-group mui-slider-loop" id="courseImageList">
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<!--<a href="#">
						<img src="../../../images/ldw04.jpg" />
					</a>-->
				</div>
				<div class="mui-slider-item">
					<!--<a href="#">
						<img src="../../../images/ldw01.jpg" />
					</a>-->
				</div>
				<div class="mui-slider-item">
					<!--<a href="#">
						<img src="../../../images/ldw02.jpg" />
					</a>-->
				</div>
				<div class="mui-slider-item">
					<!--<a href="#">
						<img src="../../../images/ldw03.jpg" />
					</a>-->
				</div>
				<div class="mui-slider-item">
					<!--<a href="#">
						<img src="../../../images/ldw04.jpg" />
					</a>-->
				</div>
				<!--支持循环，需要重复图片节点-->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<!--<a href="#">
						<img src="../../../images/ldw01.jpg" />
					</a>--> 
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<!--<div class="course_title">
        	<p style="font-size: 18px;">南京JM Dance专业拉丁舞基础班</p>
        </div>-->

		<div id="thisClassName" class="mui-content course_school" style="background: white;padding: 11px 15px;">
			<!--<p style="color: #000;font-size:5vw;margin: 0;">南京JM Dance专业拉丁舞基础班</p>
			<p style="color: #000;margin-top: 10px;">
				<span>价格：80元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span style="color: #EC971F;font-size: 6vw;">搜班价：8元</span>
			</p>-->
		</div>
		<div class="detail_menu">
			<p>学校信息</p>
		</div>
		<div id="thisSchoolInfo" class="mui-content course_school" style="background: white;padding: 11px 15px;">
			<!--<p style="color: #000;font-size:5vw;margin: 0;float: left;">南京JM Dance工作室</p>
			<span><img style="height: 20px;" src="../../../images/atta.png" /></span>
			<p style="color: #000;margin-top: 10px;">地址：南京市鼓楼区中央路1号</p>
			<p style="color: #000;">电话：025-88888888</p>
			<p style="color: #000;">学校简介：</p>
			<p style="color: #000;">&nbsp;&nbsp;&nbsp;&nbsp;健康成就未来！（healthy make future）。南京JM Dance工作室，帮助人们活得更健康不仅是我们的工作，更是我们的激情所在，是我们的一种责任这种责任感，让我们与众不同，并脱颖而出。给您提供最优质的健身环境，这只是一个开始！</p>-->
		</div>
		<div class="detail_menu">
			<p>用户点评</p>
		</div>
		<div class="mui-content course_comment" style="background: white;">
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell mui-media" id="courseDetail">
					<a class="mui-navigate-right">
						<div class="mui-media-body" id="CommentDetail">
							<div style="height: 40px;">
								<!--<p class='mui-ellipsis' style="float: left;">文人墨客</p>
								<p style="float: right;">2015-5-26</p>-->
							</div>
							<div>
								<!--<p style="color: #000;">还不错，设施很好，老师厉害。是听朋友介绍来的也可以体验一下大家。</p>-->
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" id="courseDetail">
					<a class="mui-navigate-right">
						<div class="mui-media-body">
							<p id="comment_more" style="float: right;">查看全部评价</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="detail_menu">
			<p>课程详情</p>
		</div>
		<div id="courseDetails" class="mui-content course_detail" style="background: white;padding: 11px 15px;margin-bottom: 45px;">
			<!--<p>【课程特色】</p>
			<div id="class_tese">
				<p>拉丁舞A级教师培训</p>
				<p>专业课程设计</p>
				<p>拉丁舞A级教师培训</p>
				<p>专业课程设计</p>
			</div>
			<p>【教学环境】</p>
			<div>
				<img style="width: 100%;" src="../../../images/ldw01.jpg" />
				<img style="width: 100%;" src="../../../images/ldw02.jpg" />
				<img style="width: 100%;" src="../../../images/ldw03.jpg" />
			</div>
			<p>【报名须知】</p>
			<div>
				<p>场地与器材：提供场地、练功服，自备舞鞋</p>
				<p>上课时间：电话确定</p>
				<P>课时安排：6800元/会员12个月有效</P>
			</div>-->
        </div>
        <nav class="mui-bar mui-bar-tab" style="background: #E4E9EA;">
		    <a class="mui-tab-item" id="sb_phone" style="border-right:1px solid #ddd ;" href="#middlePopover">
		    	<span class="mui-icon mui-icon-phone"></span>
		    	<span>咨询客服</span>
		    </a>
		    <a id="application" class="mui-tab-item" href="#">
		    	<span class="mui-icon mui-icon-paperplane"></span>
		    	<span>在线申请</span>
		    </a>
		</nav>
		
		<div id="middlePopover" class="mui-popover" style="height: 100px;">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell" style="text-align: center;"><a href="tel:13128973479">咨询客服：025-52235119</a>
						</li>
						<li class="mui-table-view-cell" style="text-align: center;"><a href="">取&nbsp;&nbsp;消</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	

	</body>
</html>